<template>
    <el-container>
        <el-header>
            <div><img src="../../pictures/logo.png" width="68px" height="60px"> <span>科记：记录精彩校园生活</span></div>
            <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#99ecff"
            text-color="black"
            active-text-color="#f59456">
                <el-menu-item class="grid-content" index="1">
                    <el-link href="#/home" target="_self" underline="false">科记主页</el-link>
                </el-menu-item>
                <el-menu-item class="grid-content" index="2">
                    <el-link href="#/blog" target="_self" underline="false">校园博客</el-link>
                </el-menu-item>
                <el-submenu class="grid-content" index="3">
                    <template slot="title">生活助手</template>
                    <el-menu-item index="3-1"><a href="#/blog" target="_self">生活经验</a></el-menu-item>
                    <el-menu-item index="3-2"><a href="#/blog" target="_self">美食分享</a></el-menu-item>
                    <el-menu-item index="3-3"><a href="#/question" target="_self">校园问答</a></el-menu-item>
                </el-submenu>
                <el-submenu class="grid-content" index="4">
                    <template slot="title">班级事务</template>
                    <el-menu-item index="4-1"><a href="#/blog" target="_self">班级通知</a></el-menu-item>
                    <el-menu-item index="4-2"><a href="#/account" target="_self">班级账目</a></el-menu-item>
                </el-submenu>
                <el-menu-item class="grid-content" index="5">
                    <el-link href="#/information" target="_self" underline="false">个人信息</el-link>
                </el-menu-item>
                <el-menu-item class="grid-content">
                    <div display: center>
                        <el-input placeholder="请输入内容" v-model="input1" class="input-with-select">
                            <el-select v-model="select" slot="prepend" placeholder="请选择">
                            <el-option label="校园博客" value="1"></el-option>
                            <el-option label="生活助手" value="2"></el-option>
                            <el-option label="班级通知" value="3"></el-option>
                            </el-select>
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-menu-item>
                <el-menu-item>
                    <div><el-col :span="12">
                            <div class="demo-basic--circle">
                                <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
                            </div>
                        </el-col> 
                    </div>
                </el-menu-item>
            </el-menu>
            <div class="line"></div>
        </el-header>

        <el-main>
            <el-card v-for="(blog, index) in paginatedBlogs" :key="index" style="margin-bottom: 20px;">
                <h3>{{ blog.title }}</h3>
                <p>发布者: {{ blog.user }}</p>
                <p>发布时间: {{ blog.time }}</p>
                <p>最新回答：{{ blog.answer }}</p>
                <div class="bottom clearfix">
                    <el-button type="text" class="button" @click="more">详情</el-button>
                </div>
                <p>评论：<el-input v-model="input2" placeholder="请输入内容"></el-input></p>
            </el-card>

            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="totalBlogs"
                layout="total, prev, pager, next, jumper">
            </el-pagination>
        </el-main>
    </el-container>
</template>

<script>
    export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',//与字体颜色有关的值
        input1: '',//搜索栏的输入
        select: '',//搜索栏的选择
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",//头像的访问路径
        currentPage: 1,
        pageSize: 8,
            blogs: [
                { user: '用户1', title: '博客标题1', answer:'a', time: '2024-09-01' },
                { user: '用户2', title: '博客标题2', answer:'a', time: '2024-09-02' },
                { user: '用户3', title: '博客标题3', answer:'a', time: '2024-09-03' },
                { user: '用户4', title: '博客标题4', answer:'a', time: '2024-09-04' },
                { user: '用户5', title: '博客标题5', answer:'a', time: '2024-09-05' },
                { user: '用户6', title: '博客标题6', answer:'a', time: '2024-09-06' },
                { user: '用户7', title: '博客标题7', answer:'a', time: '2024-09-07' },
                { user: '用户8', title: '博客标题8', answer:'a', time: '2024-09-08' },
                { user: '用户9', title: '博客标题9', answer:'a', time: '2024-09-09' },
                { user: '用户10', title: '博客标题10', answer:'a', time: '2024-09-10' },
                { user: '用户11', title: '博客标题11', answer:'a', time: '2024-09-11' },
                { user: '用户12', title: '博客标题12', answer:'a', time: '2024-09-12' },
            ],
        input2: ''
      };
    },
    computed: {
            totalBlogs() {
                return this.blogs.length;
            },
            paginatedBlogs() {
                const start = (this.currentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.blogs.slice(start, end);
            },
        },
    methods: {
        handleCurrentChange(newPage) {
                this.currentPage = newPage;
            },
        more() {
            var targetUrl = "#/detail2";
            // 使用window.location.href进行页面跳转
            window.location.href = targetUrl;
        }
    }
  }
</script>

<style>
    .el-header{
        background: #99ecff;
        display: flex;
        padding-left: 0;
        justify-content: space-between;
        color: black;
        font-size: 20px;
        > div{
            display: flex;
            align-items: center;
            span{
                margin-left: 15px;
            }
        }
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>